<template>
  <div class="box">
    <div class="top">
      <el-button type="primary" icon="el-icon-edit" @click="handleAdd">添加</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="id" label="类目ID" min-width="149">
        </el-table-column>
        <el-table-column prop="name" label="类目名" min-width="147">
        </el-table-column>
        <el-table-column prop="iconUrl" label="类目图标" min-width="147">
          <template slot-scope="scope">
            <img :src="scope.row.iconUrl" style="display: block;width: 40px;height: 40px;  margin: 0 auto;">
          </template>
        </el-table-column>
        <el-table-column prop="picUrl" label="类目图片" min-width="147">
          <template slot-scope="scope">
            <el-image style="width: 80px; height: 40px" :src="scope.row.picUrl" :preview-src-list="[scope.row.picUrl]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="keywords" label="关键字" min-width="147">
        </el-table-column>
        <el-table-column prop="desc" label="简介" min-width="184">
        </el-table-column>
        <el-table-column prop="level" label="级别" min-width="147">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level == 'L1' "> {{ scope.row.level === 'L1' ? '一级类目' : '二级类目' }}</el-tag>
            <el-tag type="info" v-else>{{ scope.row.level === 'L1' ? '一级类目' : '二级类目' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row.id, scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹出框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="类目名称" prop="name">
          <el-input v-model="ruleForm.name" clearable style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="关键字" prop="keywords">
          <el-input v-model="ruleForm.keywords" clearable style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="级别" prop="level">
          <el-select v-model="ruleForm.level" placeholder="请选择级别">
            <el-option label="一级类目" value="L1"></el-option>
            <el-option label="二级类目" value="L2"></el-option>
          </el-select>
        </el-form-item>
        <!-- *** -->
        <el-form-item label="父类目" v-if="ruleForm.level == 'L2'">
          <el-select v-model="ruleForm.pid" placeholder="请选择父类名">
            <el-option :label="item.label" :value="item.value" v-for="(item,index) in lisr" :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类目图标" prop="iconUrl">
          <el-upload class="avatar-uploader" :action="action" :show-file-list="false" :on-success="handleAvatarSuccessA"
            :before-upload="beforeAvatarUpload">
            <img v-if="ruleForm.iconUrl" :src="ruleForm.iconUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="类目图片" prop="picUrl">
          <el-upload class="avatar-uploader" :action="action" :show-file-list="false" :on-success="handleAvatarSuccessB"
            :before-upload="beforeAvatarUpload">
            <img v-if="ruleForm.picUrl" :src="ruleForm.picUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="类目简介" prop="desc">
          <el-input v-model="ruleForm.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { listCategory, createCategory, listCatL1, updateCategory, deleteCategory } from '@/api/category'
  import { service } from "@/utils/request";
  import {  uploadPath } from "@/api/storage"
  export default {
    data() {
      return {
         srcList: [
          {
            picUrl: ''
          }
        ],
        action: uploadPath,
        tableData: [],
        title: '',
        region: '0',
        dialogVisible: false,
       
        ruleForm: {
          desc: "",
          iconUrl: "",
          keywords: "",
          level: "L2",
          name: "",
          picUrl: "",
          pid: 0,
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }
          ],

        },

      }
    },
    mounted() {
      this.handleOusertt()
    },
    methods: {
      // 渲染数据
      handleOusertt() {
        //1
        listCategory(this.ruleForm).then(res => {
          console.log(res, '123');
          this.tableData = res.data.data.list
          console.log(this.tableData, '456');
          const lisr = res.data.data.list.map((item) => ({
            label: item.name,
            id: item.id,
            value: item.id
          }))
          this.lisr = lisr
          console.log(this.lisr, '789');
        })
        // 2
        listCatL1(this.ruleForm).then((res) => {
          // const t2 = res.data.data.list
          // this.tableData2 = JSON.parse(JSON.stringify(t2))
          // console.log(this.tableData2);//已经获取了当前数据的列表

        })
      },
      // 添加
      handleAdd() {
        this.dialogVisible = true
        this.title = '创建'
        this.ruleForm = { level: "L2", pid: 0 };
      },
      // 添加/编辑确定
      handleSure() {
        if (this.title === '创建') {
          createCategory(this.ruleForm).then((res) => {
            console.log(res,);
            this.handleOusertt()
            this.$notify({
              title: '成功',
              message: '添加成功！',
              type: 'success'
            });
            this.dialogVisible = false
            this.handleOusertt()
          })

        } else {
          updateCategory(
            this.ruleFormm
          ).then((res) => {
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success'
            });
            this.dialogVisible = false
            this.handleOusertt()
          })
        }
      },

      // 编辑
      handleEdit(id, row) {
        this.dialogVisible = true;
        this.title = '编辑';
        this.ruleForm = { ...row }; 

      },
      //  删除
      handleDelete(row) {
        deleteCategory({
          id: row.id
        }).then((res) => {
          this.handleOusertt()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
        })
      },

      // 上传图片
      // 团队图片上传成功的回调
      handleAvatarSuccessA(res, file) {
        console.log(res.data.name, "上传成功后的图片名称");
        // 图片的地址等于=接口前缀+文件名
        this.ruleForm.iconUrl = res.data.url;//!!!
        // console.log(this.ruleForm.iconUrl);

      },
      // 团队标志上传成功的回调
      handleAvatarSuccessB(res, name) {
        // 图片的地址等于=接口前缀+文件名
        this.ruleForm.picUrl = res.data.url;//!!!
        // console.log(this.ruleForm.picUrl);
        // this.ruleForm.picUrl = this.action + "/" + res.data.fileName;
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isLt2M;
      },

    },
  }
</script>
<style lang="scss" scoped>
  .box::v-deep {
    .top {
      padding: 20px;
      margin-left: 100px;
    }

    .table {
      padding: 20px;

      .el-form-item__label {
        text-align: left !important;
      }

      .el-table {
        th {
          text-align: center;
        }

        td {
          text-align: center;
          height: 60px;
        }


      }


    }

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
</style>